<template>
	<view class="sign-in">
		<!-- <u-navbar title="每日签到"  :autoBack="true" bgColor="rgba(0,0,0,0)"
			leftIconColor="#ffffff" titleStyle="color:#ffffff;"> -->
			<!-- #ifdef APP-PLUS||H5 -->
			<!-- <view class="u-nav-slot" slot="right">
				<u-icon name="@appstatic/my/my_icon_question_white.png" size='24px' color="#ffffff" @click='toPageInstructions'></u-icon>
			</view> -->
			<!-- #endif -->
		<!-- </u-navbar> -->
		<titlebara mode="" :backToIndex="false" :back="true" text="每日签到" :backgroundColor='backgroundColor'
			color='#ffffff' @rightIconClick='toPageInstructions' img="@appstatic/my/my_icon_question_white.png">
		</titlebara>

		<view class="top-box">
			<image class="top-bg" src="@appstatic/my/orderHome/sign-bg.png" mode="widthFix" />

			<view class="text-box">
				<view class="text">已连续签到</view>
				<view class="num" style="margin-left: 8rpx;margin-right: 8rpx;">{{checkinDay}}</view>
				<view class="text">天</view>
			</view>
			<view class="text-box-small">
				<view class="text">今日签到积分</view>
				<view class="num" style="margin-left: 8rpx;margin-right: 8rpx;" v-if="checkinDay<=30">+1</view>
				<view class="num" style="margin-left: 8rpx;margin-right: 8rpx;" v-else>+5</view>
			</view>
			<image class="btn-img" src="@appstatic/my/orderHome/orderHome_icon_sign02.png" mode="widthFix"
				v-if="1==2" />
		</view>

		<view class="calendar-box">
			<calendar class="uni-calendar--hook" :selected="selected" :showMonth="false" @change="change"
				@monthSwitch="monthSwitch" />

		</view>

	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js")
	import calendar from '@components/r-calendar/r-calendar.vue'
	const dialog = require("../../../utils/dialog.js")
	import titlebara from '@/components/titlebar/titlebar'
	export default {
		components: {
			calendar,
			titlebara

		},
		data() {
			return {
				value: true,
				windowHeight: 0,
				navigationBarHeight: app.globalData.statusBarHeight + 44 + 'px',
				selected: [],
				checkinDay: 0
			};
		},
		onLoad: function(options) {},
		onShow() {
			this.selectSignRecord(new Date().getFullYear(), (new Date().getMonth() + 1))
		},
		methods: {
			toPageInstructions() {
				uni.navigateTo({
					url: '/module_my/pages/signIn/signInInstructions'
				})
			},
			change(e) {
				console.log('change 返回:', e)

			},
			monthSwitch(e) {
				console.log('monthSwitchs 返回:', e)
				this.selectSignRecord(e.year, e.month)
			},
			//查询签到记录
			selectSignRecord: function(year, month) {
				var queryMonth;
				if (month < 10) {
					queryMonth = year + '-' + "0" + month
				} else {
					queryMonth = year + '-' + month
				}

				var that = this;
				var uri = app.globalData.config.interfaces.URL_SYS_ADMIN_SELECTSIGNRECORD;
				var params = {
					'month': queryMonth
				};
				console.log(params, 'params')
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						if (year == (new Date().getFullYear()) && month == (new Date().getMonth() + 1)) {
							that.checkinDay = res.data.checkinDay
						}
						that.selected = []
						var list = res.data.thisMonth
						for (var i = 0; i < list.length; i++) {
							var item = {
								date: list[i],
								info: '已签',
								isSign: 'true'
							}
							if (list[i] == new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' +
								new Date().getDate()) {
								that.isSignIn = true
							}
							that.selected.push(item)
						}
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	.sign-in {
		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		background: #EDEDED url(@appstatic/img/my/bg-img.jpg) no-repeat;
		background-position: 0 0;
		background-size: 100%;
		background-attachment: fixed;

		image {
			image-rendering: -moz-crisp-edges;
			image-rendering: -o-crisp-edges;
			image-rendering: -webkit-optimize-contrast;
			image-rendering: crisp-edges;
			-ms-interpolation-mode: nearest-neighbor;
		}

		.top-box {
			width: 750rpx;
			max-height: 750rpx;
			overflow: hidden;
			position: relative;

			.top-bg {
				display: block;
				width: 100%;
			}

			.btn-img {
				width: 178rpx;
				z-index: 99;
				position: absolute;
				top: 470rpx;
				left: 60rpx;
			}

			.text-box {
				z-index: 99;
				position: absolute;
				top: 200rpx;
				left: 60rpx;
				color: #fff;
				display: flex;
				align-items: baseline;

				.num {
					font-weight: 700;
					font-size: 40rpx;
					line-height: 46rpx;
				}

				.text {
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}

			.text-box-small {
				z-index: 99;
				position: absolute;
				top: 250rpx;
				left: 60rpx;
				color: #fff;
				display: flex;
				align-items: baseline;

				.num {
					font-weight: 700;
					font-size: 24rpx;
					line-height: 40rpx;
				}

				.text {
					font-weight: 500;
					font-size: 24rpx;
					line-height: 40rpx;
				}
			}
		}

		.calendar-box {
			margin-top: 10rpx;

			/deep/.uni-calendar__content {
				background-color: rgba(0, 0, 0, 0);
			}

			/deep/.uni-calendar__backtoday {
				display: none;
			}

			/deep/.uni-calendar__header {
				border: none;
			}

			/deep/.uni-calendar__header-btn {
				border: none;
				background: #3D3A3A;
				transform: matrix(0, -1, -1, 0, 0, 0);
			}
		}
	}
</style>
